<template>
	<app-layout>
		<view v-if="!goods" class="u-goods-detail"></view>
		<template v-if="goods">
			<!--商品轮播图 9.28 有修改-->
			<app-goods-banner :pic-list="goods.pic_url" :share="goods.share" :goods_id="id" sign="mch"
				:video-url="goods.video_url" :goods_gold="goods.original_price_discount"></app-goods-banner>
			<!-- 详情标题 -->
			<view class="goods-name"><text class="goodcatname">{{catsall.label}}</text>{{goods.name}}</view>
			<!-- <view v-if="goods.subtitle" class="goods-subtitle">
				<view class="t-omit-three">{{goods.subtitle}}</view>
				<view class="t-omit-three">去实体店体验</view>
			</view> -->
			<!--商品价格-->
			<app-goods-price :theme="getTheme"
				:share-url="poster + `&goods_id=` + goods.id + `&mch_id=` + goods.mch_id + `&v_id=` + store_id"
				:goods="goods" :select-attr="selectAttr" :has-poster-nav="true"
				:poster-config="poster_config + `&goods_id=` + goods.id + `&mch_id=` + goods.mch_id + `&v_id=` + store_id"
				:poster-generate="poster_generate + `&goods_id=` + goods.id + `&mch_id=` + goods.mch_id + `&v_id=` + store_id">
			</app-goods-price>
			<template v-if="mch_store">
				<view class="shop-info dir-left-nowrap cross-center" v-if="mch_store">
					<image @click="navShop" class="box-grow-0" :src="mch_store.store.cover_url"></image>
					<view @click="navShop" class="dir-top-nowrap box-grow-1">
						<view class="store-name t-omit">{{mch_store.store.name}}</view>
						<!-- <view class="dir-left-nowrap">
							<view class="store-num">商品数量: {{mch_store.goods_count}}</view>
							<view>已售: {{mch_store.order_goods_count}}</view>
						</view> -->
					</view>
					<view class="box-grow-0">
						<!-- <view @click="navService" class="contain main-center cross-center dir-top-nowrap">
							<image class="store-icon-contain" src="/static/image/summary-phone.png"></image>
							<view class="store-contain">客服</view>
						</view> -->
						<view class="main-center store-btn">
							<view class="shop-btn" @click="navShop">进店逛逛</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="mch_store.distance" class="shop-address dir-left-nowrap cross-top">
					<view class="dir-top-nowrap box-grow-1">
						<view class="address">{{mch_store.store.address}}</view>
						<view class="km">距离{{mch_store.distance}}</view>
					</view>
					<view @click="navMap" class="box-grow-0 icon-address main-center">
						<image src="../image/summary-address.png"></image>
					</view>
				</view> -->
			</template>
			<!-- 商品服务 -->
			<view class="goods-margin" v-if="goods.services.length > 0">
				<app-service :theme="getTheme" :list="goods.services" :guarantee_title="goods.guarantee_title"
					:guarantee_pic="goods.guarantee_pic"></app-service>
			</view>
			<!-- 如何获取优惠券 -->
			<!-- <view class="goods-margin" @click="voucher">
				<view class="u-service cross-center">
					<view class="box-grow-0 u-text">如何获取优惠券</view>
					<image class="u-icon-del" src="../../../static/image/icon/arrow-right.png"></image>
				</view>
			</view> -->
			<!-- <view class="goods-margin" @click="leabrand">
				<view class="u-service cross-center">
					<view class="box-grow-0 u-text">线上线下完美合一的珠宝领导品牌</view>
					<image class="u-icon-del" src="../../../static/image/icon/arrow-right.png"></image>
				</view>
			</view> -->
			<!-- 10.9 添加金币白条 -->
			<view class="goods-margin" @click="tobaitiao">
				<view class="u-service u-orange cross-center">
					<view class="box-grow-0">查看自己得金币并可使用</view>
					<view class="canmore">
						<text class="bigzi">
							金币<!-- 白条 -->
						</text>
						<text class="smalzi">
							点击进入>>>
						</text>
					</view>
				</view>
			</view>
			<view class="goods-margin" @click="leabrand">
				<view class="u-service u-red cross-center">
					<view class="box-grow-0">线上线下完美合一的珠宝领导品牌</view>
					<view class="canmore">
						<text>查看更多</text>
						<image class="image" src="../../../static/image/icon/right.png"></image>
					</view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="goods-margin" v-if="comment_list.length > 0">
				<app-goods-comment :comment_list="comment_list" :theme="getTheme"></app-goods-comment>
			</view>
			<!-- 商品规格 -->
			<!-- 10.9 ref="issjo" -->
			<u-attr :is_show_left="false" :store_id="store_id" :video_id="video_id" v-model="attrShow" :goods="goods"
				:themeObject="themeObject" :checked="selectAttr" @check="onAttr" ref="issjo">
				<!-- <view class="goods-margin" slot="btn">
					<app-goods-attr :attr-groups="goods.attr_groups" :selectAttr="selectAttr"></app-goods-attr>
				</view> -->
			</u-attr>
			<!--商品信息-->
			<app-goods-marketing :limit="goods.goods_marketing.limit" :shipping="goods.goods_marketing.shipping"
				:pickup="goods.goods_marketing.pickup" :card="goods.goods_marketing_award.card"
				:integral="goods.goods_marketing_award.integral" :express="goods.express" :theme="getTheme">
			</app-goods-marketing>
			<!-- 商品分类 -->
			<view class="clalist goods-margin" @click="tolist">
				<view class="dir-left-nowrap item">
					<view class="box-grow-0">
						<image
							:src="catsall.pic_url != '' ? catsall.pic_url : imgprefix + '/web/uploads/thumbs/mall1/20210628/ee56ff6d2fd02c27930d11a635ace256.jpg'"
							class="avatar"></image>
					</view>
					<!-- goods.mchCats[0] -->
					<view class="box-grow-1">
						<view class="name mb-8">{{catsall.label}}</view>
					</view>
				</view>
				<view class="evaluate">
					<view class="main-right">
						宝贝描述<text class="red">高</text>
					</view>
					<view class="main-right eva-item">
						卖家服务<text class="red">高</text>
					</view>
					<view class="main-right eva-item">
						实体店服务<text class="red">高</text>
					</view>
				</view>
			</view>
			<!--商品详情-->
			<view class="goods-margin margin-bottom">
				<app-goods-detail :goods="goods"></app-goods-detail>
			</view>
			<!--相关推荐-->
			<view class="recommend" v-if="recommend_list.length>0">
				<view class="recommend-title dir-left-nowrap main-center">
					<view class="dir-left-nowrap cross-center">
						<view class="border"></view>
						<image src="../../../static/image/icon/icon-favorite.png"></image>
						<view style="color: #353535;">猜你喜欢</view>
						<view class="border"></view>
					</view>
				</view>
				<view class="recommend-list">
					<u-ordinary-list :isShowAttr="true" :list="recommend_list" :theme="getTheme" :list-style="2">
					</u-ordinary-list>
				</view>
			</view>
			<!-- 底部空格 -->
			<view class="safe-area-inset-bottom">
				<view class="u-bottom-height" :class="full_reduce ? 'u-bottom-height-1' : 'u-bottom-height-0'"></view>
			</view>
			<!-- 底部按钮 -->
			<view class="safe-area-inset-bottom u-bottom-fixed">
				<view v-if="full_reduce">
					<app-goods-full-reduce :theme="getTheme" :full_reduce="full_reduce" sign="mch">
					</app-goods-full-reduce>
				</view>
				<view class="app-bottom dir-left-nowrap">
					<view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="tolist">
						<image
							:src="catsall.pic_url != '' ? catsall.pic_url : imgprefix + '/web/uploads/thumbs/mall1/20210628/ee56ff6d2fd02c27930d11a635ace256.jpg'">
						</image>
						<!-- goods.mchCats[0] -->
						<view class="u-line-1" style="width:100rpx;text-align: center;">{{catsall.label}}
						</view>
					</view>
					<!-- <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="navShop">
						<image src="../../../static/image/icon/icon-mch.png"></image>
						<view>店铺</view>
					</view> -->
					<!-- <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="navService">
						<image src="/static/image/summary-phone.png"></image>
						<view>客服</view>
					</view> -->
					<!-- 9.15 取消客服加分享 -->
					<view class="dir-top-nowrap main-center cross-center little box-grow-0 red" @click="shareClick">
						<image src="/static/image/icon/icon-share.png"></image>
						<view>分享</view>
					</view>
					<!-- 9.15 分享 -->
					<view>
						<app-share-qr-code v-model="shareShow" :has-poster-nav="true"
							:url="poster + `&goods_id=` + goods.id + `&mch_id=` + goods.mch_id"
							:poster-config="poster_config + `&goods_id=` + goods.id + `&mch_id=` + goods.mch_id + `&v_id=` + store_id"
							:poster-generate="poster_generate + `&goods_id=` + goods.id + `&mch_id=` + goods.mch_id + `&v_id=` + store_id">
						</app-share-qr-code>
					</view>
					<view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="favorite">
						<image
							:src="goods.favorite ? '../../../static/image/icon/icon-favorite-active.png' : '../../../static/image/icon/icon-favorite.png'">
						</image>
						<view>收藏</view>
					</view>
					<view class="box-grow-1 ">
						<view class="dir-left-nowrap" style="height: 100%;" v-if="goods.goods_stock > 0">
							<!-- 12.6注释购物车 -->
							<!-- <view class="main-center cross-center button"
								:class="getTheme === 'a' || getTheme === 'b' || getTheme === 'f' ? getTheme + '-s-back ' + 'text ' + getTheme : getTheme + '-s-back ' + getTheme + '-m-text ' + getTheme"
								@click="clickAttr">
								加入购物车
							</view> -->
							<view class="main-center cross-center button" style="color: #ffffff;"
								:class="getTheme + '-m-back ' + getTheme" @click="clickAttr">支付定金
							</view>
						</view>
						<view class="dir-left-nowrap" style="height: 100%;" v-else>
							<view style="width: 100%;background-color: #CDCDCD;color: #fff;"
								class="main-center cross-center button">已售罄</view>
						</view>
					</view>
				</view>
			</view>
			<view class="quick-box" @click="tostore">
				规划4500家实体店
			</view>
		</template>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner.vue";
	import appGoodsPrice from "../../../components/page-component/goods/app-goods-price.vue";
	import appService from "../../../components/page-component/goods/app-goods-service.vue";
	import appGoodsAttr from "../../../components/page-component/goods/app-goods-attr.vue";
	import appGoodsMarketing from "../../../components/page-component/goods/app-goods-marketing.vue";
	import appGoodsComment from "../../../components/page-component/goods/app-goods-comment.vue";
	import appComments from "../../../components/page-component/app-comments/app-comments.vue";
	import appGoodsFullReduce from "../../../components/page-component/goods/app-goods-full-reduce";
	import uOrdinaryList from '../../../components/page-component/u-goods-list/u-ordinary-list.vue';
	import uAttr from '../../../components/page-component/goods/u-attr.vue';
	import appGoodsDetail from '../../../components/page-component/goods/app-goods-detail.vue';
	// 9.15 分享
	import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';

	export default {
		name: "goods",
		components: {
			appGoodsBanner,
			appGoodsPrice,
			appService,
			appGoodsAttr,
			appGoodsMarketing,
			appComments,
			uOrdinaryList,
			uAttr,
			appGoodsDetail,
			appGoodsFullReduce,
			appGoodsComment,
			// 9.15 分享
			appShareQrCode
		},
		data() {
			return {
				goods: null,
				full_reduce: null,
				selectAttr: null,
				recommend_list: null,
				attrShow: false,
				id: 0,
				mch_id: 0,
				store_id: '',

				video_id: 0,

				mch_store: null,
				mch_setting: null,
				poster: this.$api.mch.poster,
				poster_config: this.$api.mch.poster_config,
				poster_generate: this.$api.mch.poster_generate,
				// 门店列表
				storelist: [],
				longitude: '',
				latitude: '',
				firstGoodsId: null,
				imgprefix: this.$siteInfo.imgroot,
				// 评价
				comment_list: [],
				page: 1,
				// 商品分类
				catsall: '',
				cat_id: '',
				cattitle: '',
				// 9.15 分享
				shareShow: false
			};
		},
		computed: {
			...mapState({
				mall: state => state.mallConfig.mall
			}),
			...mapState('gConfig', {
				iphone: (data) => {
					return data.iphone;
				},
				iphoneHeight: (state) => {
					return state.iphoneHeight;
				},
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},
		},
		onLoad(options) {
			// 从哪个视频点击进来的
			if (options.videoid) {
				this.video_id = options.videoid
			}
			if (options.cat_id) {
				this.cat_id = options.cat_id
			}
			[this.mch_id, this.id] = [options.mch_id, options.id];
			this.store_id = options.store_id
			// this.imgprefix = this.$siteInfo.imgroot
			// this.getLocation()
			this.getAddress();
			this.loadRecommend();
			this.loadComment()
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		// // 10.9 每次刷新金币
		// onShow() {
		// 	if(this.$refs.issjo.isshoe){
		// 		this.$refs.issjo.allgold()
		// 	}
		// },
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
				imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic : '',
				path: '/plugins/mch/goods/goods',
				params: {
					id: this.id,
					mch_id: this.mch_id,
					store_id: this.store_id
				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
				query: {
					id: this.id,
					mch_id: this.mch_id,
					store_id: this.store_id
				}
			});
		},
		methods: {
			// 门店列表
			getLocation() {
				uni.showLoading({
					mask: true,
					title: '正在获取位置信息',
				});
				uni.getLocation({
					success: (e) => {
						uni.hideLoading();
						this.longitude = e.longitude;
						this.latitude = e.latitude;
						this.loadStore();
					},
					fail: () => {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: '获取位置信息失败，需要授权获取您的位置信息',
							showCancel: false,
							confirmText: '打开授权',
							success(e) {
								if (e.confirm) {
									uni.openSetting({});
								}
							}
						});
					},
				});
			},
			loadStore() {
				this.$request({
					url: this.$api.order.store_list,
					data: {
						keyword: '',
						longitude: this.longitude,
						latitude: this.latitude,
						goods_id: this.firstGoodsId,
					}
				}).then(response => {
					if (response.code === 0) {
						this.storelist = response.data.list;
					}
				}).catch(() => {});
			},
			// 跳转如何获取优惠券
			voucher() {
				uni.navigateTo({
					url: '/pages/video/explain/explain?id=20&title=' + '如何获取优惠券'
				})
			},
			// 10.9 金币白条
			tobaitiao() {
				this.$refs.issjo.isshoe = true
				// 10.9 每次刷新金币总数
				this.$refs.issjo.allgold()
				this.clickAttr() // 测试使用 非正式
			},
			leabrand() {
				uni.navigateTo({
					url: '/pages/video/explain/explain?id=20&title=' + '线上线下完美合一的珠宝领导品牌'
				})
			},
			getAddress() {
				const self = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						self.getMch(res.latitude, res.longitude);
					},
					fail(e) {
						self.getMch(0, 0);
					}
				});
			},

			getMch(latitude, longitude) {
				const self = this;
				self.$showLoading();
				self.$request({
					url: self.$api.mch.detail,
					data: {
						id: self.mch_id,
						latitude: latitude,
						longitude: longitude,
					}
				}).then(info => {
					self.$hideLoading();
					if (info.code === 0) {
						[self.mch_store, self.mch_setting] = [info.data.detail, info.data.mchSetting];
						self.getDetail();
					} else {
						uni.showModal({
							title: '提示',
							content: info.msg,
							showCancel: false,
							success: function(e) {
								if (e.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					}
				}).catch(() => {
					self.$hideLoading();
				})
			},

			getDetail() {
				this.$showLoading();
				this.$request({
					url: this.$api.mch.goods_detail,
					data: {
						id: this.id,
						mch_id: this.mch_id
					}
				}).then(e => {
					this.$hideLoading();
					if (e.code === 0) {
						let {
							goods_activity,
							mchCats,
							cats
						} = e.data.detail;
						this.goods = e.data.detail;
						uni.setNavigationBarTitle({
							title: this.goods.name
						});

						if (this.cat_id != '') {
							let catoinfo = []
							catoinfo = cats.filter(item => {
								return item.value == this.cat_id
							})
							let catinfo = catoinfo[0]
							this.catsall = catinfo
						} else {
							if (this.mch_id == 1 || this.mch_id == 2) {
								this.catsall = mchCats[0]
							} else {
								this.catsall = cats[0]
							}
						}
						// console.log(this.goods);
						if (goods_activity) {
							this.full_reduce = goods_activity.full_reduce;
						}
					} else {
						uni.showModal({
							title: '提示',
							content: e.msg,
							showCancel: false
						});
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},
			loadComment() {
				this.$request({
					url: this.$api.goods.comments,
					data: {
						page: this.page,
						page_size: 20,
						batch_ids: this.id,
					}
				}).then(response => {
					this.$hideLoading();
					if (response.code === 0) {
						this.comment_list = response.data.list
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},

			loadRecommend() {
				const self = this;
				self.$request({
					url: self.$api.goods.new_recommend,
					data: {
						goods_id: self.id,
					},
					method: 'get'
				}).then(info => {
					if (info.code === 0) {
						this.recommend_list = info.data.list;
					}
				});
			},

			navMap() {
				uni.openLocation({
					latitude: parseFloat(this.mch_store.store.latitude),
					longitude: parseFloat(this.mch_store.store.longitude),
					name: this.mch_store.store.name,
					address: this.mch_store.store.address,
				})
			},

			onAttr(data) {
				this.selectAttr = data;
			},

			navService() {
				/* uni.navigateTo({
					url: `/pages/web/web?url=` + this.mch_setting.web_service_url
				}); */
				// 9.8 注释
				/* if (this.mch_setting.web_service_url != '') {
					uni.navigateTo({
						url: '/pages/web/web?url=' + encodeURIComponent(this.mch_setting.web_service_url)
					})
				} else {
					uni.navigateTo({
						url: '/pages/web/web?url=' + this.mall.setting.web_service_url
					})
				} */
				// 9.8 修改客服
				if (wx.openCustomerServiceChat) {
					wx.openCustomerServiceChat({
						extInfo: {
							url: 'https://work.weixin.qq.com/kfid/kfc2132bcfa45f0fb28'
						},
						corpId: 'ww4e635c5ebdf96587',
						showMessageCard: true
					})
				} else {
					uni.showModal({
						title: '版本不支持',
						content: '请下载最新版本微信',
						showCancel: false,
						confirmText: '我知道了'
					})
				}
			},
			// 9.15 分享
			shareClick() {
				// 判断登入
				if (!this.$user.isLogin()) {
					this.$user.getInfo().then(() => {});
				} else {
					if (this.goods.extra_quick_share) {
						this.quickShareShow = true;
					} else {
						this.shareShow = true;
					}
				}
			},
			navShop() {
				/* uni.redirectTo({
					url: `/pages/?mch_id=` + this.mch_id
				}); */
				/* uni.navigateBack({
					delta: 1
				}) */
				uni.navigateTo({
					url: '/pages/store/boutique/boutique?id=' + this.store_id + '&mch_id=' + this.mch_id
				})
			},

			back() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},

			tolist() {
				// goods.mchCats[0]
				uni.navigateTo({
					url: '/plugins/mch/goodslist/goodslist?cat_id=' + this.catsall.value + '&mch_id=' +
						this.mch_id + '&store_id=' + this.store_id + '&title=' + this.catsall.label
				})
			},

			favorite() {
				this.goods.favorite ? this.goods.favorite = false : this.goods.favorite = true;
				this.$request({
					url: !this.goods.favorite ? this.$api.user.favorite_remove : this.$api.user.favorite_add,
					data: {
						goods_id: this.goods.id,
					}
				}).then(e => {
					if (e.code !== 0) {
						uni.showModal({
							title: '提示',
							content: e.msg,
							showCancel: false
						});
					}
				});
			},

			clickAttr() {
				if (this.goods.type === 'ecard') {
					uni.showToast({
						title: '虚拟商品不允许加入购物车',
						icon: 'none'
					});
					return;
				}
				this.attrShow = true;
			},
			tostore() {
				/* uni.navigateTo({
					url: '/pages/order-submit/store-pick?isshow=true'
				}) */
				uni.navigateTo({
					url: '/pages/turnover/videolist?type=20&title=实体店'
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.goods-name {
		padding: #{24rpx};
		background-color: #ffffff;
		color: $uni-important-color-black;
	}

	.goodcatname {
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #fe0000;
		padding: 6rpx 24rpx;
		border-radius: 24rpx;
		margin-right: 6rpx;
	}

	.goods-subtitle {
		padding: #{24rpx};
		padding-top: 0;
		font-size: 24rpx;
		background-color: #ffffff;
		color: #999999;
	}


	.attr {
		padding: #{24rpx} 0;
		background-color: #f7f7f7;
	}

	.recommend {
		.recommend-title {
			margin: #{40rpx} 0 #{32rpx} 0;
			font-size: $uni-font-size-weak-one;
			color: $uni-general-color-two;

			.border {
				border-top: #{1rpx} solid #bbbbbb;
				height: 0;
				width: #{40rpx};
				margin: 0 #{24rpx};
			}

			image {
				width: #{24rpx};
				height: #{24rpx};
				display: block;
				margin-right: #{12rpx};
			}
		}
	}

	.shop-btn {
		height: #{64rpx};
		border: #{1px} solid #cdcdcd;
		color: #666666;
		background: #FFFFFF;
		width: #{146rpx};
		line-height: #{64rpx};
		border-radius: #{32rpx};
		text-align: center;
	}

	.app-bottom {
		width: 100%;
		height: #{110rpx};
		font-size: $uni-font-size-general-one;

		.little:nth-child(3) {
			border-style: none;
		}

		.little {
			width: #{110rpx};
			height: 100%;
			background-color: #ffffff;
			font-size: #{20rpx};
			color: $uni-general-color-two;
			border-right: #{1rpx} solid #e2e2e2;

			// 9.15
			&.red {
				color: $uni-important-color-red;
			}

			image {
				width: #{40rpx};
				height: #{40rpx};
				display: block;
				margin-bottom: #{10rpx};
			}
		}

		.button {
			// width: #{265rpx};
			width: 100%;
		}

		.service {
			background-color: #446dfd;
			color: #ffffff;
		}

		.contact-tel {
			background-color: #f39800;
			color: #ffffff;
		}

		.contact {
			background-color: #4cbf2a;
			color: #ffffff;
		}
	}

	.comments {
		margin-bottom: #{20rpx};
		background-color: #ffffff;
	}

	.detail {
		background-color: #ffffff;

		image {
			width: 100%;
			height: #{80rpx};
			display: block;
		}
	}

	.shop-info {
		height: #{124rpx};
		color: #999999;
		font-size: #{24rpx};
		background: #FFFFFF;
		margin-top: #{24rpx};

		>image {
			border-radius: #{8rpx};
			margin: 0 #{24rpx};
			height: #{80rpx};
			width: #{80rpx}
		}

		.store-name {
			font-size: #{32rpx};
			color: #353535;
			margin-bottom: #{16rpx};
		}

		.store-num {
			margin-right: #{32rpx};
		}

		.contain {
			width: #{152rpx};
			height: 100%;

			image {
				height: #{40rpx};
				width: #{40rpx};
				display: block;
			}

			view {
				margin-top: #{8rpx};
			}
		}

		.store-btn {
			margin: 0 #{24rpx};
		}
	}

	.shop-address {
		padding: 0 #{24rpx};
		font-size: #{24rpx};
		background: #FFFFFF;
		padding-bottom: #{24rpx};

		.address {
			color: #666666;
			max-height: #{560rpx};
		}

		.km {
			color: #999999;
			margin-top:#{10rpx};
		}

		.icon-address {
			width: #{120rpx};
			border-left: 1px solid #e2e2e2;
		}

		image {
			height: #{32rpx};
			width: #{32rpx};
			display: block;
		}
	}

	.text {
		color: #ffffff;
	}

	.goods-margin {
		margin-top: 20upx;
	}

	// 10.9
	.u-orange {
		color: #fd5a26;
		font-size: 32rpx;
		font-weight: bold;

		.canmore {
			border-radius: 60rpx;
			background: #ff0016;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 24rpx;
			color: #FFFFFF;
			display: flex;

			.bigzi {
				font-size: 36rpx;
				font-weight: bold;
				line-height: 60rpx;
			}

			.smalzi {
				line-height: 72rpx;
			}
		}
	}

	.u-red {
		color: #fe0000;
		font-size: 32rpx;
		font-weight: bold;

		.canmore {
			width: 175rpx;
			height: 44rpx;
			border-radius: 60rpx;
			background: #ed9196;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 24rpx;
			color: #332d24;
			display: inline-flex;
			align-items: center;
			justify-content: space-around;
		}

		.image {
			width: 12upx;
			height: 22upx;
		}

	}

	// 商品分类
	.clalist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: #{24rpx};
		background: #FFFFFF;

		.item {
			padding: #{24rpx};
			display: flex;
			align-items: center;
			background: #fff;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				margin-right: #{24rpx};
				border-radius: #{999rpx};
				box-shadow: 0 0 #{1rpx} rgba(0, 0, 0, .25);
			}

			.name {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.evaluate {
			font-size: 24rpx;

			.eva-item {
				margin: 12rpx 0 0;
			}

			.red {
				margin-left: 12rpx;
				color: #EB5757;
			}
		}
	}

	// 门店列表
	.list {
		.item {
			padding: #{24rpx};
			background: #fff;
			border-bottom: #{1rpx} solid $uni-weak-color-one;

			.avatar {
				width: #{140rpx};
				height: #{140rpx};
				margin-right: #{24rpx};
				border-radius: #{999rpx};
				box-shadow: 0 0 #{1rpx} rgba(0, 0, 0, .25);
			}

			.name {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.mobile,
			.distance {
				font-size: $uni-font-size-general-one;
				color: $uni-general-color-two;
			}
		}
	}

	.margin-bottom {
		margin-bottom: 20rpx;
	}

	.u-bottom-height-0 {
		height: 110upx;
	}

	.u-bottom-height-1 {
		height: 190upx;
	}

	.u-bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1602;
		background-color: #ffffff;
	}

	// 如何获取抵用券
	.u-service {
		height: 100upx;
		background-color: #fff;
		font-size: 26upx;
		padding: 0 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.u-text {
		color: #999999;
	}

	.u-icon-del {
		width: 12upx;
		height: 22upx;
		display: block;
	}

	.ecard-text {
		color: #999999;
	}

	// 实体店
	.quick-box {
		position: fixed;
		right: 48rpx;
		z-index: 100;
		bottom: 90px;
		width: 100rpx;
		height: 150rpx;
		overflow: hidden;
		border-radius: 10rpx;
		background: #FFFFFF;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #ccc;
		color: #ff2f2f;
	}
</style>
